<template>
  <div>
    <el-space direction="vertical" fill style="display: flex">
      <div style="display: flex; justify-content: space-between">
        <el-space>
          <el-button type="default" @click="refresh">刷新</el-button>
          <el-button type="primary">新增</el-button>
          <el-button type="danger">删除</el-button>
        </el-space>
        <el-space>
          <el-input placeholder="请输入" />
          <el-button type="primary">搜索</el-button>
        </el-space>
      </div>

      <el-table v-loading="loading" stripe border :data="list">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="headImg" label="头像" width="70">
          <template #default="{ row }">
            <el-avatar :src="row.headImg" />
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="80" />
        <el-table-column prop="name" label="姓名" width="80" />
        <el-table-column prop="nickName" label="昵称" width="80" />
        <el-table-column prop="roleName" label="角色" width="80" />
        <el-table-column prop="status" label="状态" width="80">
          <template #default="{ row }">
            <el-switch :model-value="!!row.status" />
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号码" width="120" />
        <el-table-column prop="remark" label="备注" width="120" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作">
          <template #default>
            <el-button>编辑</el-button>
            <el-button>删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="display: flex; justify-content: flex-end">
        <el-pagination
          v-model:current-page="params.page"
          v-model:page-size="params.size"
          :total="total"
          :page-sizes="[2, 4, 6, 8, 10]"
          layout="total, sizes, prev, pager, next, jumper"
          background
        />
      </div>
    </el-space>
  </div>
</template>

<script>
import { getUserList } from "@/api/system";

export default {
  name: "User",

  data() {
    return {
      // 请求参数
      params: {
        page: 1,
        size: 10,
      },
      // 表格数据
      list: [],
      // 表格数据总条数
      total: 1,
      // 表格数据请求中
      loading: false,
    };
  },

  methods: {
    async refresh() {
      try{
        this.loading = true;
        const { list,pagination } = await getUserList(this.params);
        this.list = list;
        this.total = pagination.total
        }finally{
          this.loading = false;
      }
    }
  },

  created() {
    this.refresh();
  },
};
</script>